<template>
    <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
import * as echarts from 'echarts';

require('echarts/theme/macarons') // echarts theme

export default {
  name: "Dashboard",
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    backgroundColor: {
      type: String,
      default:'#375A88'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'dark')
      this.chart.setOption({
        backgroundColor:this.backgroundColor,
        series: [
          {
            tooltip: {
              formatter: '{a} <br/>{b} : {c}%',
            },
            type: 'gauge',
            data: [
              // 每一个对象就代表一个指针
              {
                name: '已运行天数：',
                value: 70,
                itemStyle: { // 指针的样式
                  color: 'red' // 指针的颜色
                }
              }
            ],
            detail: {   // 数值文案样式
              width: 40,
              height: 14,
              fontSize: 14,
              color: '#fff',
              backgroundColor: 'auto',
              borderRadius: 3,
              formatter: '{value}%',
              show:false
            },
            title: {  // name 文字大小
              fontSize: 20,
              show:true,
              offsetCenter : [0, "100%"],
              textStyle:{
                //文字颜色
                color:'#ccc',
                //字体风格,'normal','italic','oblique'
                fontStyle:'normal',
                //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                fontWeight:'bold',
                //字体系列
                fontFamily:'sans-serif',
                //字体大小
                fontSize:18
              }
            },
            progress: {  // 仪表盘数据样式
              show: false,
              overlap: false,
              roundCap: false
            },
            max: 100,
            min: 0 // min max 控制仪表盘数值范围
          }
        ]
      })
    }
  }
}
</script>

